<template>
  <div class="zx-radio">
    <div class="radio" v-for="(radio, index) in data" :key="index">
      <label @click="checkRadio(index)">
        <i :class="{isCheck: chenck[index]}"></i>
        {{ radio }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  name: 'zxRadio',
  props: {
    data: {
      type: Array,
      default () {
        return ['', '']
      }
    },
    checkVal: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      chenck: []
    }
  },
  methods: {
    checkRadio (index) {
      let lCheck = this.chenck.slice()
      this.data.forEach((dataM, i) => {
        if (i === index) {
          lCheck[i] = true
          this.$emit('on-chang', dataM)
        } else {
          lCheck[i] = false
        }
      })
      this.chenck = lCheck
    }
  },
  mounted: function () {
    this.data.forEach((dataM, i) => {
      if (i === this.checkVal) {
        this.chenck.push(true)
      } else {
        this.chenck.push(false)
      }
    })
  }
}
</script>

<style lang="less">
.zx-radio { width: 100%;}
.zx-radio>.radio { display: inline-block; vertical-align: middle; margin-left: 0.3rem; font-size: 0.3rem; height: 0.3rem; line-height: 0.3rem;}
.zx-radio>.radio i { display: inline-block; width: 0.3rem; height: 0.3rem; border:1px solid #bfbfbf; vertical-align: middle; margin-right: 0.1rem;}
.zx-radio>.radio i.isCheck { background: url(../../assets/img/selected.png) no-repeat center center; background-size: 100% 100%;}
</style>
